<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta name="keywords" content="jquery,ui,easy,easyui,web">-->
    <!--<meta name="description" content="easyui help you build your web page easily!">-->
    <!--<title>DataGrid inline editing - jQuery EasyUI Demo</title>-->
    <!--<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css">-->

    <!--<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>-->
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-easyui-1.5.1/themes/default/easyui.css">
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-easyui-1.5.1/themes/icon.css">

    <script src="__PUBLIC__/js/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script src="__PUBLIC__/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script src="__PUBLIC__/js/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
    <script src="__PUBLIC__/js/jquery-easyui-1.5.1/plugins/jquery.layout.js"></script>

    <script>

        $(function(){
            $('#tt').datagrid({
                title:'Editable DataGrid',
                iconCls:'icon-edit',
                width:'100%',
                height:'auto',
//                singleSelect:true,
                fitColumns:true,
                idField:'itemid',
                pagination:true,
                url:"{:U('home/station/stationlist','')}",
                toolbar:[
                    {
                        text:'新建',
                        iconCls: 'icon-add',
                        handler:function () {
                            insert();
                        }

                    }

                ],
                columns:[[
                    {field:'id',title:'编码',width:60},
                    {field:'name',title:'名称',width:180,
                        editor:{
                            type:'textbox',
                            options:{
                                required:true,
                                missingMessage:'必须填写名称'
                            }
                        }
                    },
                    {field:'action',title:'操作',width:80,align:'center',
                        formatter:function(value,row,index){
                            if (row.editing){


                                var s = '<a href="#"  id="link_save"  onclick="saverow(this)" >Save</a> ';
                                var c = '<a href="#" id="link_cancel" onclick="cancelrow(this)">Cancel</a>';
                                return s+c;
                            } else {

                                var e = '<a href="#"  id="link_edit" class="easyui-linkbutton" onclick="editrow(this)">Edit</a> ';
                                var d = '<a href="#" id="link_delete" onclick="deleterow(this)">Delete</a>';
                                return e+d;
                            }
                        }
                    }
                ]],
                onBeforeEdit:function(index,row){
                    row.editing = true;
                    updateActions(index);
                },
                onAfterEdit:function(index,row,changes){
                    if (changes.name!=null){
                        var data = {"name":changes.name,'id':row.id};

                        var posturl="{:U('station/station_post')}"
                        $.post(posturl,data,function (data) {
                            alert(data.msg)
                            $('#tt').datagrid('load');
                        });
                    }

                    row.editing = false;
                    updateActions(index);
                },
                onCancelEdit:function(index,row){
                    row.editing = false;
                    updateActions(index);
                },


            });

        });
        function updateActions(index){
            $('#tt').datagrid('updateRow',{
                index: index,
                row:{}
            });

        }
        function getRowIndex(target){
            var tr = $(target).closest('tr.datagrid-row');
            return parseInt(tr.attr('datagrid-row-index'));
        }
        function editrow(target){
            $('#tt').datagrid('beginEdit', getRowIndex(target));
        }
        function deleterow(target){
            $.messager.confirm('Confirm','确认删除吗?',function(r){
                if (r){
                    $('#tt').datagrid('deleteRow', getRowIndex(target));
                }
            });
        }
        function saverow(target){
            $('#tt').datagrid('endEdit', getRowIndex(target));
        }
        function cancelrow(target){
            $('#tt').datagrid('load');
            $('#tt').datagrid('cancelEdit', getRowIndex(target));

        }
        function insert(){
            var row = $('#tt').datagrid('getSelected');
            if (row){
                var index = $('#tt').datagrid('getRowIndex', row);
            } else {
                index = 0;
            }
            $('#tt').datagrid('insertRow', {
                index: index,
                row:{
                    status:'P'
                }
            });
            $('#tt').datagrid('selectRow',index);
            $('#tt').datagrid('beginEdit',index);
        }
    </script>
</head>
<body>
<!--<h2>站点管理</h2>-->
<!--<div>-->
<!--<form action="{:U('Home/station/addstation_post')}">-->
<!--<table class="table">-->
<!--<tr>-->
<!--<th colspan="2">添加站点</th>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>-->
<!--<label for="stationname_input">站点名称</label>-->
<!--</td>-->
<!--<td style="text-align: left"><input type="text" class="easyui-validatebox" required="true"-->
<!--name="stationname" id="stationname_input"></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan="2" style="text-align: center">-->
<!--<input type="submit" value="提交">-->
<!--</td>-->
<!--</tr>-->

<!--</table>-->
<!--</form>-->
<!--</div>-->

<!--<div style="margin:10px 0">-->
<!--<a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>-->
<!--</div>-->
<table id="tt"></table>

</body>
</html>